<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>video.js播放rtmp流</title>
		<!--引入播放器样式-->
		<link href="video-js.min.css" rel="stylesheet">
		<!--引入播放器js-->
		<script src="video.min.js"></script>
		<script src="videojs-flash.min.js"></script>
	</head>
	<body>
		<!--vjs-big-play-centered 播放按钮居中-->
		<!--poster默认的显示界面，就是还没点播放，给你显示的界面-->
		<!--controls 规定浏览器应该为视频提供播放控件-->
		<!--preload="auto" 是否提前加载-->
		<!--autoplay 自动播放-->
		<!--loop=true 自动循环-->
		<!--data-setup='{"example_option":true}' 可以把一些属性写到这个里面来，如data-setup={"autoplay":true}-->
		<video id="my-player1"
			class="video-js vjs-default-skin vjs-big-play-centered" controls
			preload="auto" autoplay="autoplay"
			width="500" height="400">
			<!--src: 规定媒体文件的 URL  type:规定媒体资源的类型-->
			<source src='rtmp://127.0.0.1:1935/live/stream1' type='rtmp/flv' />
		</video>
		<video id="my-player2"
			   class="video-js vjs-default-skin vjs-big-play-centered" controls
			   preload="auto" autoplay="autoplay"
			   width="500" height="400">
			<!--src: 规定媒体文件的 URL  type:规定媒体资源的类型-->
			<source src='rtmp://127.0.0.1:1935/history/stream1' type='rtmp/flv' />
		</video>
		<script type="text/javascript">
		    // 设置flash路径,用于在videojs发现浏览器不支持HTML5播放器的时候自动唤起flash播放器
		    videojs.options.flash.swf = 'video-js.swf';
		  	//my-player为页面video元素的id
		    var player1 = videojs('my-player1');
		  	//播放
		    player1.play();
			var player2 = videojs('my-player2');
			//播放
			player2.play();
			//    1. 播放   player.play()
			//    2. 停止   player.pause()
			//    3. 暂停   player.pause()
		</script>
	</body>
</html>